<html>
<head>
	<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js" type="text/javascript"></script>
	<script language="javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.7.1/ui/jquery-ui.js" type="text/javascript"></script>
	<script src="../js/dualselect.js"></script>
	<link href="../css/dualselect.css" rel="stylesheet"></script>

	<script>
	$(function() {
		$(".html").text($(".html").next().html());

		$(".dual-select").dualselect();
	});
	</script>

	<style>
		/* { font-size: 20px; }
		h2 { font-size: 16px; }
		h3 { font-size: 13px; }*/
		pre { border: 1px solid #ccc; background-color: #eee; padding: 4px; }

	</style>

</head>
<body>

<div style="margin: auto; width: 500px;">

<h1>Dual Select jQuery Widget</h1>
<h2>Methods</h2>
<h3>values</h3>
<pre>$(".dual-select").dualselect("values");</pre>
<p>Returns an array containing all the values selected</p>

<h3>selected</h3>
<pre>$(".dual-select").dualselect("selected");</pre>
<p>Returns a jQuery object containing the elements selected.</p>

<h3>selectedText</h3>
<pre>$(".dual-select").dualselect("selectedText");</pre>
<p>Returns an array containing all the text content of each element selected.</p>

<h3>selectedHtml</h3>
<pre>$(".dual-select").dualselect("selectedHtml");</pre>
<p>Returns an array containing all the HTML content of each element selected.</p>

<h2>Examples</h2>

<h3>Javascript</h3>
<pre>$(".dual-select").dualselect();</pre>
<h3>HTML</h3>
<pre class="html"></pre>
<div><select class="dual-select">
	<option value="1" class="selected">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
	<option value="5">Option 5</option>
</select>
</div>

<h2>Download</h2>
<a href="link">jquery.ui.dualselect.1.0.js</a>

</body>
</html>
